<template>
    <div class="homeBulletin_box outer_shadows">
        <div class="homeBulletin_header">
             <div class="homeBulletin_header_img">
                 <img v-show="bulletin.img!=null" :src="bulletin.img" alt="">
                 <span class="homeBulletin_header_title">{{bulletin.title}}</span>
             </div>
            <div class="homeBulletin_more">
                <router-link to="/announcement" @click="toAnnouncement" target="_blank">更多</router-link>
                <img src="/public/img/home/arrow_right.png" alt="">
            </div>
        </div>

        <ul>
            <li v-for="(item,index) in bulletin.bulletinList" :key="index">
                <img v-if="bulletin.img!=null" :src="bulletin.img" alt="">
                <span class="homeBulletin_triangle" v-else></span>
                <router-link @click="to" :to="'/articleDetails?id='+item.id" target="_blank">{{ item.title }}</router-link>
            </li>

        </ul>
    </div>
</template>

<!--更多福利-->
<script setup>
//数据列表
const bulletin = defineProps({
    bulletinList: Array,
    title: String,
    img:String
});

//跳转详情页
const to = ()=>{
    window.localStorage.setItem("Current_option","1000");
}

//跳转公共页
const toAnnouncement = ()=>{
    window.localStorage.setItem("Current_option","-1");
}

</script>

<style scoped>
.homeBulletin_box {
    width: 100%;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(96, 97, 98, 0.1);
}

.homeBulletin_header {
    display: flex;
    padding: 5px 0;
    justify-content: space-between;
    border-bottom: 1px dotted  rgba(103, 98, 98, 0.7);
    margin-bottom: 5px;
}

.homeBulletin_more {
    display: flex;
    justify-content: center;
    align-items: center;
}

img {
    width: 20px;
    vertical-align: -3px;
}

ul {
    list-style: none;
}

li {
    height: 35px;
    display: flex;
    align-items: center;
}
li img{
    margin-right: 5px;
}
ul li a{
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
}


.homeBulletin_triangle {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid #606162;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-right: 5px;
}

.homeBulletin_header_title {
    font-size: 18px;
    font-weight: bolder;
}
.homeBulletin_header_img img{
    width: 20px;
    height: 20px;
    margin-right: 3px;
}
</style>